<template>
    <div>
        <Card>

            <Row class="form-row">
                <Form :model="filters" label-position="right" :label-width="90" inline ref="formInline">
                    <FormItem label="小区">
                        <div class="filters-input">
                            <el-select v-model="filters.name" placeholder="请选择小区" filterable clearable
                                       no-data-text="暂无数据">
                                <el-option v-for="item in houseList" :value="item.name" :key="item.name"
                                           :label="item.name"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="ios-search" @click="handleQuery('formInline')">搜索</Button>
                    </FormItem>
                    <FormItem>
                        <el-button type="primary" @click="WxComentAuth()">授权</el-button>
                    </FormItem>
                </Form>
            </Row>
            <el-table stripe border :loading="tableLoading" :data="tableData" ref="table" style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column label="公众号名称" prop="nick_name"></el-table-column>
                <el-table-column label="授权公众号ID" prop="biz_appid"></el-table-column>
                <el-table-column label="管理小区" prop="houingNames"></el-table-column>

                <el-table-column label="操作" width="550" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="configure( scope.row.biz_appid )">配置运营小区
                        </el-button>
                        <el-button size="mini" type="primary" @click="menuConfig( scope.row.biz_appid )">微信菜单管理
                        </el-button>
                        <!-- <el-button size="mini" type="primary" @click="sendMsg( scope.row.biz_appid )">推送消息
                         </el-button>-->
                    </template>
                </el-table-column>

            </el-table>

            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  id="lyPage"
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>

        </Card>
        <Modal v-model="modalAuth" title="微信公众号授权" width="830">
            <iframe width="800" height="600" id="authIFrame" src=""/>
            <div slot="footer">
                <Button type="text" size="large" @click="onCancel()">关闭</Button>
                <Button type="primary" size="large" @click="handleSubmit" :loading="tableLoading">确定</Button>
            </div>
        </Modal>


        <el-dialog title="配置运营小区" :visible.sync="configureHouse" width="30%">
            <div class="pp-info">
                <el-form :model="configureInfo" :rules="rules" ref="configureForm" label-width="100px"
                         class="demo-ruleForm">
                    <el-form-item label="小区" prop="housingIdArray">
                        <treeselect noChildrenText="没有子节点" noOptionsText="暂无选项"
                                    noResultsText="没有发现结果" placeholder="选择小区" v-model="configureInfo.housingIdArray"
                                    :multiple="true"
                                    :options="treeList"/>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="configureHouse = false">取 消</el-button>
                <el-button type="primary" @click="sureConfigureInfo('configureForm')">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="推送消息" :visible.sync="sendMessage" width="50%">
            <div class="pp-info">

            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="sendMessage = false">取 消</el-button>
                <el-button type="primary" @click="sureMessageInfo('messageForm')">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="配置微信菜单" :visible.sync="configureMenu" width="1000px" min-height="300px;">

                 <div class="body">


                     <div class="content" style="width:900px;margin:0 auto;">
                         <!-- vue实例挂载的DOM元素 -->
                         <div id="app-menu">
                             <!-- 菜单预览界面 -->

                             <div class="weixin-preview">
                                 <div class="weixin-hd">
                                     <div class="weixin-title">{{weixinTitle}}</div>
                                 </div>
                                 <div class="weixin-bd">
                                     <ul class="weixin-menu" id="weixin-menu" >
                                         <!--  判断如果selectedMenuIndex是当前点击的主菜单索引则添加current样式  -->
                                         <li v-for="(btn,i) in menu.button" class="menu-item" :class="{current:selectedMenuIndex===i&&selectedMenuLevel()==1}" @click="selectedMenu(i)">
                                             <div class="menu-item-title">
                                                 <span>{{ btn.name }}</span>
                                             </div>
                                             <!--  v-show来切换是否显示 这里如果选中了主菜单则子菜单弹出  -->
                                             <ul class="weixin-sub-menu" v-show="selectedMenuIndex===i">
                                                 <li v-for="(sub,i2) in btn.sub_button" class="menu-sub-item" :class="{current:selectedSubMenuIndex===i2&&selectedMenuLevel()==2}"  @click.stop="selectedSubMenu(i2)">
                                                     <div class="menu-item-title">
                                                         <span>{{sub.name}}</span>
                                                     </div>
                                                 </li>
                                                 <li v-if="btn.sub_button.length<5" class="menu-sub-item" @click.stop="addMenu(2)">
                                                     <div class="menu-item-title">
                                                         <i class="icon14_menu_add"></i>
                                                     </div>
                                                 </li>
                                             </ul>
                                         </li>
                                         <li class="menu-item" v-if="menu.button.length<3" @click="addMenu(1)">
                                             <i class="icon14_menu_add"></i>
                                         </li>
                                     </ul>
                                 </div>
                             </div>
                             <!-- 菜单编辑界面 -->
                             <div class="weixin-menu-detail" v-if="selectedMenuLevel()==1">
                                 <div class="menu-input-group" style="border-bottom: 2px #e8e8e8 solid;">
                                     <div class="menu-name">{{menu.button[selectedMenuIndex].name}}</div>
                                     <div class="menu-del" @click="delMenu">删除菜单</div>
                                 </div>
                                 <div class="menu-input-group">
                                     <div class="menu-label">菜单名称</div>
                                     <div class="menu-input">
                                         <input type="text" name="name" placeholder="请输入菜单名称" class="menu-input-text" v-model="menu.button[selectedMenuIndex].name" @input="checkMenuName(menu.button[selectedMenuIndex].name)">
                                         <p class="menu-tips" style="color:#e15f63" v-show="menuNameBounds">字数超过上限</p>
                                         <p class="menu-tips">字数不超过4个汉字或8个字母</p>
                                     </div>
                                 </div>
                                 <template v-if="menu.button[selectedMenuIndex].sub_button.length==0">
                                     <div class="menu-input-group">
                                         <div class="menu-label">菜单内容</div>
                                         <div class="menu-input">
                                             <select v-model="menu.button[selectedMenuIndex].type" name="type" class="menu-input-text">
                                                 <option value="view">跳转网页(view)</option>
                                                 <option value="media_id">发送消息(media_id)</option>
                                                 <!--<option value="view_limited">跳转公众号图文消息链接(view_limited)</option>-->
                                                 <option value="miniprogram">打开指定小程序(miniprogram)</option>
                                                 <option value="click">自定义点击事件(click)</option>
                                                 <option value="scancode_push">扫码上传消息(scancode_push)</option>
                                                 <option value="scancode_waitmsg">扫码提示下发(scancode_waitmsg)</option>
                                                 <option value="pic_sysphoto">系统相机拍照(pic_sysphoto)</option>
                                                 <option value="pic_photo_or_album">弹出拍照或者相册(pic_photo_or_album)</option>
                                                 <option value="pic_weixin">弹出微信相册(pic_weixin)</option>
                                                 <option value="location_select">弹出地理位置选择器(location_select)</option>
                                             </select>
                                         </div>
                                     </div>
                                     <div class="menu-content" v-if="selectedMenuType()==1">
                                         <div class="menu-input-group">
                                             <p class="menu-tips">订阅者点击该子菜单会跳到以下链接</p>
                                             <div class="menu-label">页面地址</div>
                                             <div class="menu-input">
                                                 <input type="text" placeholder="" class="menu-input-text" v-model="menu.button[selectedMenuIndex].url">
                                                 <p class="menu-tips cursor" @click="selectNewsUrl">从公众号图文消息中选择</p>
                                             </div>
                                         </div>
                                     </div>
                                     <div class="menu-msg-content" v-else-if="selectedMenuType()==2">
                                         <div class="menu-msg-head"><i class="icon_msg_sender"></i>图文消息</div>
                                         <div class="menu-msg-panel">
                                             <div class="menu-msg-select" v-if="menu.button[selectedMenuIndex].media_id==''||menu.button[selectedMenuIndex].media_id==undefined" @click="selectMaterialId">
                                                 <i class="icon36_common add_gray"></i>
                                                 <strong>从素材库中选择</strong>
                                             </div>
                                             <div class="menu-msg-select" v-else>
                                                 <div class="menu-msg-title"><i class="icon_msg_sender"></i>{{material.title}}</div>
                                                 <a :href="material.url" target="_blank" class="btn btn-sm btn-info">查看</a>
                                                 <div class="btn btn-sm btn-danger" @click="delMaterialId">删除</div>
                                             </div>
                                         </div>
                                     </div>
                                     <div class="menu-content" v-else-if="selectedMenuType()==3">
                                         <div class="menu-input-group">
                                             <p class="menu-tips">用于消息接口推送，不超过128字节</p>
                                             <div class="menu-label">菜单KEY值</div>
                                             <div class="menu-input">
                                                 <input type="text" placeholder="" class="menu-input-text" v-model="menu.button[selectedMenuIndex].key">
                                             </div>
                                         </div>
                                     </div>
                                     <div class="menu-content" v-else-if="selectedMenuType()==4">
                                         <div class="menu-input-group">
                                             <p class="menu-tips">订阅者点击该子菜单会跳到以下小程序</p>
                                             <div class="menu-label">小程序APPID</div>
                                             <div class="menu-input">
                                                 <input type="text" placeholder="小程序的appid（仅认证公众号可配置）" class="menu-input-text" v-model="menu.button[selectedMenuIndex].appid">
                                             </div>
                                         </div>
                                         <div class="menu-input-group">
                                             <div class="menu-label">小程序路径</div>
                                             <div class="menu-input">
                                                 <input type="text" placeholder="小程序的页面路径 pages/Index/index" class="menu-input-text" v-model="menu.button[selectedMenuIndex].pagepath">
                                             </div>
                                         </div>
                                         <div class="menu-input-group">
                                             <div class="menu-label">备用网页</div>
                                             <div class="menu-input">
                                                 <input type="text" placeholder="" class="menu-input-text" v-model="menu.button[selectedMenuIndex].url">
                                                 <p class="menu-tips">旧版微信客户端无法支持小程序，用户点击菜单时将会打开备用网页。</p>
                                             </div>
                                         </div>
                                     </div>
                                 </template>
                             </div>
                             <!-- 子菜单 -->
                             <div class="weixin-menu-detail" v-if="selectedMenuLevel()==2">
                                 <div class="menu-input-group" style="border-bottom: 2px #e8e8e8 solid;">
                                     <div class="menu-name">{{menu.button[selectedMenuIndex].sub_button[selectedSubMenuIndex].name}}</div>
                                     <div class="menu-del" @click="delMenu">删除子菜单</div>
                                 </div>
                                 <div class="menu-input-group">
                                     <div class="menu-label">子菜单名称</div>
                                     <div class="menu-input">
                                         <input type="text" placeholder="请输入子菜单名称" class="menu-input-text" v-model="menu.button[selectedMenuIndex].sub_button[selectedSubMenuIndex].name" @input="checkMenuName(menu.button[selectedMenuIndex].sub_button[selectedSubMenuIndex].name)">
                                         <p class="menu-tips" style="color:#e15f63" v-show="menuNameBounds">字数超过上限</p>
                                         <p class="menu-tips">字数不超过8个汉字或16个字母</p>
                                     </div>
                                 </div>
                                 <div class="menu-input-group">
                                     <div class="menu-label">子菜单内容</div>
                                     <div class="menu-input">
                                         <select v-model="menu.button[selectedMenuIndex].sub_button[selectedSubMenuIndex].type" name="type" class="menu-input-text">
                                             <option value="view">跳转网页(view)</option>
                                             <option value="media_id">发送消息(media_id)</option>
                                             <!--<option value="view_limited">跳转公众号图文消息链接(view_limited)</option>-->
                                             <option value="miniprogram">打开指定小程序(miniprogram)</option>
                                             <option value="click">自定义点击事件(click)</option>
                                             <option value="scancode_push">扫码上传消息(scancode_push)</option>
                                             <option value="scancode_waitmsg">扫码提示下发(scancode_waitmsg)</option>
                                             <option value="pic_sysphoto">系统相机拍照(pic_sysphoto)</option>
                                             <option value="pic_photo_or_album">弹出拍照或者相册(pic_photo_or_album)</option>
                                             <option value="pic_weixin">弹出微信相册(pic_weixin)</option>
                                             <option value="location_select">弹出地理位置选择器(location_select)</option>
                                         </select>
                                     </div>
                                 </div>
                                 <div class="menu-content" v-if="selectedMenuType()==1">
                                     <div class="menu-input-group">
                                         <p class="menu-tips">订阅者点击该子菜单会跳到以下链接</p>
                                         <div class="menu-label">页面地址</div>
                                         <div class="menu-input">
                                             <input type="text" placeholder="" class="menu-input-text" v-model="menu.button[selectedMenuIndex].sub_button[selectedSubMenuIndex].url">
                                             <p class="menu-tips cursor" @click="selectNewsUrl">从公众号图文消息中选择</p>
                                         </div>
                                     </div>
                                 </div>
                                 <div class="menu-msg-content" v-else-if="selectedMenuType()==2">
                                     <div class="menu-msg-head"><i class="icon_msg_sender"></i>图文消息</div>
                                     <div class="menu-msg-panel">
                                         <div class="menu-msg-select" v-if="menu.button[selectedMenuIndex].sub_button[selectedSubMenuIndex].media_id==''||menu.button[selectedMenuIndex].sub_button[selectedSubMenuIndex].media_id==undefined" @click="selectMaterialId">
                                             <i class="icon36_common add_gray"></i>
                                             <strong>从素材库中选择</strong>
                                         </div>
                                         <div class="menu-msg-select" v-else>
                                             <i class="icon_msg_sender"></i>{{material.title}}
                                             <a :href="material.url" target="_blank" class="btn btn-sm btn-info">查看</a>
                                             <div class="btn btn-sm btn-danger" @click="delMaterialId">删除</div>
                                         </div>
                                     </div>
                                 </div>
                                 <div class="menu-content" v-else-if="selectedMenuType()==3">
                                     <div class="menu-input-group">
                                         <p class="menu-tips">用于消息接口推送，不超过128字节</p>
                                         <div class="menu-label">菜单KEY值</div>
                                         <div class="menu-input">
                                             <input type="text" placeholder="" class="menu-input-text" v-model="menu.button[selectedMenuIndex].sub_button[selectedSubMenuIndex].key">
                                         </div>
                                     </div>
                                 </div>
                                 <div class="menu-content" v-else-if="selectedMenuType()==4">
                                     <div class="menu-input-group">
                                         <p class="menu-tips">订阅者点击该子菜单会跳到以下小程序</p>
                                         <div class="menu-label">小程序APPID</div>
                                         <div class="menu-input">
                                             <input type="text" placeholder="小程序的appid（仅认证公众号可配置）" class="menu-input-text" v-model="menu.button[selectedMenuIndex].sub_button[selectedSubMenuIndex].appid">
                                         </div>
                                     </div>
                                     <div class="menu-input-group">
                                         <div class="menu-label">小程序路径</div>
                                         <div class="menu-input">
                                             <input type="text" placeholder="小程序的页面路径 pages/Index/index" class="menu-input-text" v-model="menu.button[selectedMenuIndex].sub_button[selectedSubMenuIndex].pagepath">
                                         </div>
                                     </div>
                                     <div class="menu-input-group">
                                         <div class="menu-label">备用网页</div>
                                         <div class="menu-input">
                                             <input type="text" placeholder="" class="menu-input-text" v-model="menu.button[selectedMenuIndex].sub_button[selectedSubMenuIndex].url">
                                             <p class="menu-tips">旧版微信客户端无法支持小程序，用户点击菜单时将会打开备用网页。</p>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>


                 </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="configureMenu = false">取 消</el-button>
                <el-button type="primary" @click="sureMenuInfo()">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>


<script>
    //线上下载模板地址
    import baseURL from "_conf/url";
    import Treeselect from "@riophae/vue-treeselect";
    import Cookies from "js-cookie";
    import {TOKEN_KEY} from "@/libs/util";
    import moment from "moment"
    //线上上传账单地址
    const act = baseURL + "/api/bill/upload";

    export default {
        components: {
            Treeselect,
        },
        data() {
            return {
                //查询条件
                filters: {},
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                tableData: [],
                houseList: [],
                msghousingList: [],
                //表单提交状态
                modal: {},
                tableLoading: false,
                modalAuth: false,
                Industry: {},
                choseHousingList: [],
                messageInfo: {},
                configureHouse: false,
                configureMenu: false,
                sendMessage: false,
                treeList: [],
                menuList: [],
                houseList: [],
                chooseBtn: {},
                housingIdArray: null,
                appId: '',
                addDisabled: false,
                showdisabled: true,
                showSubBtn: false,
                showAddSubBtn: true,
                addButton: {},
                configureInfo: {},
                menuInfo: {},
                number: '',
                //校验规则
                rules: {
                    housingIdArray: [
                        {
                            required: true,
                            message: "请选择小区",
                        }
                    ],
                },
                clickInfo: {},
                haveNull: true,
                sureBtnShow: true,

                //微信菜单
                weixinTitle: '公众号菜单',
                //菜单对象
                // menu: {'button': []},//当前菜单
                menu: {
                    "button": [
                        {
                            "name": "主菜单1",
                            "sub_button": []
                        },
                        {
                            "name": "主菜单2",
                            "sub_button": []
                        },
                        {
                            "name": "主菜单3",
                            "sub_button": [
                                {
                                    "name": "子菜单1"
                                }]
                        }]
                },

                selectedMenuIndex:'',//当前选中菜单索引
                selectedSubMenuIndex:'',//当前选中子菜单索引
                menuNameBounds:false,//菜单长度是否过长
                material:{
                    title:'',
                    url:'',
                    thumb_url:''
                }

            }
        },
        created: function () {
            this.gethouse();
            this.loadData();

        },
        methods: {
            //加载数据
            loadData: function () {
                if (this.tableLoading) return;
                this.tableLoading = true;
                let params = this.filters;
                params.pageNum = this.pageNum;
                params.pageSize = this.pageSize;

                // console.log(params)

                //与后台交换数据
                this.getRequest("/api/authInfo/auths?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize).then(res => {
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.tableData = [];
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },

            //加载小区
            gethouse() {
                let url = "/api/housing/getHousingByLogin";
                this.postRequest(url).then(res => {
                    this.houseList = res;
                });
            },
            handleClick(tab, event) {
                // console.log(tab, event);
            },

            //加载部门树
            treeData() {
                this.getRequest("/api/authInfo/trees").then(res => {
                    if (res.code == 20000) {
                        this.treeList = res.data;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //加载菜单树
            menuTreeData(appId) {
                this.getRequest("/wechatCommon/wxMenu?gzhId=" + appId).then(res => {
                    if (res.code == 20000) {
                        this.menu = res.data.menu;
                        // 把按钮改为可以点击状态
                        this.showSubBtn = false;
                        //初始页面显示的值


                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //获取运营的小区
            houseingData(appId) {
                this.getRequest("/wechatCommon/housingList?gzhId=" + appId).then(res => {
                    if (res.code == 20000) {
                        this.msghousingList = res.data;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },

            //查询
            handleQuery(name) {
                this.loadData();
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            onCancel: function () {
                this.modalAuth = false;
                document.getElementById("authIFrame").setAttribute("src", "");
            },
            //获取授权
            WxComentAuth: function () {
                this.modalAuth = true;
                document.getElementById("authIFrame").setAttribute("src", baseURL + "/wechatCommon/toAuth");
            },
            handleSubmit: function () {
                this.modalAuth = false;
                document.getElementById("authIFrame").setAttribute("src", "");
                this.loadData();
            },
            //    配置小区
            configure: function (appId) {
                this.treeData();
                this.configureInfo.appId = appId;
                this.configureHouse = true;
            },
            //    配置菜单
            menuConfig: function (appId) {
                this.menuTreeData(appId);
                this.menuInfo.appId = appId;
                this.configureMenu = true;
            },
            //    推送消息
            sendMsg: function (appId) {
                this.messageInfo = {}
                this.choseHousingList = []
                this.houseingData(appId);
                this.messageInfo.appId = appId;
                this.sendMessage = true;
            },

            sureConfigureInfo: function (configureForm) {
                this.$refs[configureForm].validate((valid) => {
                    if (valid) {
                        this.postRequest("/api/authInfo/configCell", this.configureInfo).then(res => {
                            if (res.code == 20000) {
                                this.configureHouse = false;
                                this.$Message.success({
                                    content: "操作成功",
                                    duration: 5
                                });
                                this.getCompanyId(this.filter);
                            } else {
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    }
                });
            },
            sureMessageInfo: function (messageForm) {
                this.$refs[messageForm].validate((valid) => {
                    if (valid) {
                        console.log(this.messageInfo);
                        this.messageInfo.housingList = this.choseHousingList;
                        this.postRequest("/wechatCommon/sendTemplete", this.messageInfo).then(res => {
                            if (res.code == 20000) {
                                this.sendMessage = false;
                                this.$Message.success({
                                    content: "操作成功",
                                    duration: 5
                                });
                            } else {
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    }
                });
            },


            //选中主菜单
            selectedMenu:function(i,event){
                this.selectedSubMenuIndex=''
                this.selectedMenuIndex=i
                var selectedMenu=this.menu.button[this.selectedMenuIndex]
                //清空选中media_id 防止再次请求
                if(selectedMenu.media_id!=undefined&&selectedMenu.media_id!=''&&this.selectedMenuType()==2){
                    this.getMaterial(selectedMenu.media_id)
                }
                //检查名称长度
                this.checkMenuName(selectedMenu.name)
            },
            //选中子菜单
            selectedSubMenu:function(i,event){
                this.selectedSubMenuIndex=i
                var selectedSubMenu=this.menu.button[this.selectedMenuIndex].sub_button[this.selectedSubMenuIndex]
                if(selectedSubMenu.media_id!=undefined&&selectedSubMenu!=''&&this.selectedMenuType()==2){
                    this.getMaterial(selectedSubMenu.media_id)
                }
                this.checkMenuName(selectedSubMenu.name)
            },
            //选中菜单级别
            selectedMenuLevel: function () {
                if (this.selectedMenuIndex !== '' && this.selectedSubMenuIndex === '') {
                    //主菜单
                    return 1;
                }else if (this.selectedMenuIndex !== '' && this.selectedSubMenuIndex !== '') {
                    //子菜单
                    return 2;
                }else {
                    //未选中任何菜单
                    return 0;
                }
            },
            //获取菜单类型 1. view网页类型，2. media_id类型和view_limited类型 3. click点击类型，4.miniprogram表示小程序类型
            selectedMenuType: function () {
                if (this.selectedMenuLevel() == 1&&this.menu.button[this.selectedMenuIndex].sub_button.length==0) {
                    //主菜单
                    switch (this.menu.button[this.selectedMenuIndex].type) {
                        case 'view':return 1;
                        case 'media_id':return 2;
                        case 'view_limited':return 2;
                        case 'click':return 3;
                        case 'scancode_push':return 3;
                        case 'scancode_waitmsg':return 3;
                        case 'pic_sysphoto':return 3;
                        case 'pic_photo_or_album':return 3;
                        case 'pic_weixin':return 3;
                        case 'location_select':return 3;
                        case 'miniprogram':return 4;
                    }
                } else if (this.selectedMenuLevel() == 2) {
                    //子菜单
                    switch (this.menu.button[this.selectedMenuIndex].sub_button[this.selectedSubMenuIndex].type) {
                        case 'view':return 1;
                        case 'media_id':return 2;
                        case 'view_limited':return 2;
                        case 'click':return 3;
                        case 'scancode_push':return 3;
                        case 'scancode_waitmsg':return 3;
                        case 'pic_sysphoto':return 3;
                        case 'pic_photo_or_album':return 3;
                        case 'pic_weixin':return 3;
                        case 'location_select':return 3;
                        case 'miniprogram':return 4;
                    }
                } else {
                    return 1;
                }
            },
            //添加菜单
            addMenu:function(level){
                if(level==1&&this.menu.button.length<3){
                    this.menu.button.push({
                        "type": "view",
                        "name": "菜单名称",
                        "sub_button": [],
                        "url":""
                    })
                    this.selectedMenuIndex=this.menu.button.length-1
                    this.selectedSubMenuIndex=''
                }
                if(level==2&&this.menu.button[this.selectedMenuIndex].sub_button.length<5){
                    this.menu.button[this.selectedMenuIndex].sub_button.push({
                        "type": "view",
                        "name": "子菜单名称",
                        "url":""
                    })
                    this.selectedSubMenuIndex=this.menu.button[this.selectedMenuIndex].sub_button.length-1
                }
            },
            //删除菜单
            delMenu:function(){
                if(this.selectedMenuLevel()==1&&confirm('删除后菜单下设置的内容将被删除')){
                    if(this.selectedMenuIndex===0){
                        this.menu.button.splice(this.selectedMenuIndex, 1);
                        this.selectedMenuIndex = 0;
                    }else{
                        this.menu.button.splice(this.selectedMenuIndex, 1);
                        this.selectedMenuIndex -=1;
                    }
                    if(this.menu.button.length==0){
                        this.selectedMenuIndex = ''
                    }
                }else if(this.selectedMenuLevel()==2){
                    if(this.selectedSubMenuIndex===0){
                        this.menu.button[this.selectedMenuIndex].sub_button.splice(this.selectedSubMenuIndex, 1);
                        this.selectedSubMenuIndex = 0;
                    }else{
                        this.menu.button[this.selectedMenuIndex].sub_button.splice(this.selectedSubMenuIndex, 1);
                        this.selectedSubMenuIndex -= 1;
                    }
                    if(this.menu.button[this.selectedMenuIndex].sub_button.length==0){
                        this.selectedSubMenuIndex = ''
                    }
                }
            },
            //检查菜单名称长度
            checkMenuName:function(val){
                if(this.selectedMenuLevel()==1&&this.getMenuNameLen(val)<=8){
                    this.menuNameBounds=false
                }else if(this.selectedMenuLevel()==2&&this.getMenuNameLen(val)<=16){
                    this.menuNameBounds=false
                }else{
                    this.menuNameBounds=true
                }
            },
            //获取菜单名称长度
            getMenuNameLen: function (val) {
                var len = 0;
                for (var i = 0; i < val.length; i++) {
                    var a = val.charAt(i);
                    a.match(/[^\x00-\xff]/ig) != null?len += 2:len += 1;
                }
                return len;
            },
            //选择公众号素材库素材
            selectMaterialId:function(){
                alert("暂不支持次操作");
            },
            //选择公众号图文链接
            selectNewsUrl:function(){
                alert("暂不支持次操作");
            },
            //设置选择的素材id
            setMaterialId:function(id,title,url){
                if(this.selectedMenuLevel()==1){
                    Vue.set(this.menu.button[this.selectedMenuIndex],'media_id',id)
                }else if(this.selectedMenuLevel()==2){
                    Vue.set(this.menu.button[this.selectedMenuIndex].sub_button[this.selectedSubMenuIndex],'media_id',id)
                }
                this.material.title=title
                this.material.url=url
                layer.close(layer.index);
            },
            //删除选择的素材id
            delMaterialId:function(){
                if(this.selectedMenuLevel()==1){
                    this.menu.button[this.selectedMenuIndex].media_id=''
                }else if(this.selectedMenuLevel()==2){
                    this.menu.button[this.selectedMenuIndex].sub_button[this.selectedSubMenuIndex].media_id=''
                }
            },
            //设置选择的图文链接
            setNewsUrl:function(url){
                if(this.selectedMenuLevel()==1){
                    Vue.set(this.menu.button[this.selectedMenuIndex],'url',url)
                }else if(this.selectedMenuLevel()==2){
                    Vue.set(this.menu.button[this.selectedMenuIndex].sub_button[this.selectedSubMenuIndex],'url',url)
                }
                layer.close(layer.index);
            },
            //获取素材信息
            getMaterial:function(id){
                alert("暂不支持次操作");
            },



            //微信菜单

            //保存菜单
            sureMenuInfo: function () {
                let params = {}

                params.gzhId = this.menuInfo.appId//公众号Id

                params.menuJson = JSON.stringify(this.menu)//公众号菜单JSON，必须满足微信api接口数据规范


                //保存菜单
                this.postRequest("/wechatCommon/saveWxMenu", params).then(res => {
                    if (res.code == 20000) {
                        this.configureMenu = false;
                        this.$Message.success({
                            content: "操作成功",
                            duration: 5
                        });
                        this.sureBtnShow = true;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            }
        }
    };
</script>
<style lang="less" scoped>
    #pop {
        width: 780px;
        height: 600px;
        display: none;
        position: fixed;
        z-index: 10;
        top: 10%;
        left: 50%;
        margin-left: -390px;
    }



    *{
        box-sizing: border-box;
    }
    ul{
        padding:0;
    }
    li{
        list-style:none;
    }
    #app-menu{
        overflow: hidden;
        width:950px;
    }
    .weixin-preview{
        position: relative;
        width: 320px;
        height: 540px;
        float: left;
        margin-right:10px;
        border: 1px solid #e7e7eb;
    }
    .weixin-preview a{
        text-decoration: none;
        color: #616161;
    }
    .weixin-preview .weixin-hd{
        color: #fff;
        text-align: center;
        position: relative;
        top:0px;
        left:0px;
        width: 320px;
        height:64px;
        background: transparent url(../../assets/wechat/menu_head.png) no-repeat 0 0;
        background-position: 0 0;
    }
    .weixin-preview .weixin-hd .weixin-title{
        color:#fff;
        font-size:15px;
        width:100%;
        text-align: center;
        position:absolute;
        top: 33px;
        left: 0px;
    }

    .weixin-preview .weixin-bd{

    }
    .weixin-preview .weixin-menu{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: 1px solid #e7e7e7;
        background: transparent url(../../assets/wechat/menu_foot.png) no-repeat 0 0;
        background-position: 0 0;
        background-repeat: no-repeat;
        padding-left: 43px;
        margin-bottom:0px;
    }
    /*一级*/
    .weixin-preview .weixin-menu .menu-item{
        position: relative;
        float: left;
        line-height: 50px;
        height:50px;
        text-align: center;
        width:33.33%;
        border-left: 1px solid #e7e7e7;
        cursor: pointer;
        color:#616161;
    }
    .weixin-preview .weixin-menu .menu-item:first-child{
        /*border-left-width:0px;*/
    }

    /*二级*/
    .weixin-preview .weixin-sub-menu{
        position: absolute;
        bottom: 60px;
        left: 0;
        right: 0;
        border-top: 1px solid #d0d0d0;
        margin-bottom:0px;
        background: #fafafa;
        display: block;
        padding:0;
    }
    .weixin-preview .weixin-sub-menu .menu-sub-item{
        line-height: 50px;
        height:50px;
        text-align: center;
        width:100%;
        border: 1px solid #d0d0d0;
        border-top-width: 0px;
        cursor: pointer;
        position: relative;
        color:#616161;
    }
    .weixin-preview .menu-arrow{
        position: absolute;
        left: 50%;
        margin-left: -6px;
    }
    .weixin-preview .arrow_in{
        bottom: -4px;
        display: inline-block;
        width: 0px;
        height: 0px;
        border-width: 6px 6px 0px;
        border-style: solid dashed dashed;
        border-color: #fafafa  transparent transparent;
    }
    .weixin-preview .arrow_out{
        bottom: -5px;
        display: inline-block;
        width: 0px;
        height: 0px;
        border-width: 6px 6px 0px;
        border-style: solid dashed dashed;
        border-color: #d0d0d0 transparent transparent;
    }

    .weixin-preview .menu-item .menu-item-title,.weixin-preview .menu-sub-item .menu-item-title{
        width:100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        box-sizing: border-box;
    }


    .weixin-preview .menu-item.current,.weixin-preview .menu-sub-item.current{
        border: 1px solid #44b549;
        background: #fff;
        color:#44b549;
    }
    .weixin-preview .weixin-sub-menu.show{
        display:block;
    }
    .weixin-preview .icon_menu_dot{
       background: url(../../assets/wechat/index_z354723.png) 0px -36px no-repeat;
        width: 7px;
        height: 7px;
        vertical-align: middle;
        display: inline-block;
        margin-right: 2px;
        margin-top: -2px;
    }
    .weixin-preview .icon14_menu_add{
        background: url(../../assets/wechat/index_z354723.png) 0px 0px no-repeat;
        width: 14px;
        height: 14px;
        vertical-align: middle;
        display: inline-block;
        margin-top: -2px;
    }
    .weixin-preview li:hover .icon14_menu_add{
       background: url(../../assets/wechat/index_z354723.png) 0px -18px no-repeat;
    }

    .weixin-preview .menu-item:hover{
        color: #000;
    }
    .weixin-preview .menu-sub-item:hover{
        background: #eee;
    }

    .weixin-preview li.current:hover{
        background: #fff;
        color: #44b549;
    }

    /*菜单内容*/
    .weixin-menu-detail{
        width: 600px;
        padding: 0px 20px 5px;
        background-color: #f4f5f9;
        border: 1px solid #e7e7eb;
        float: left;
        min-height: 540px;
    }
    .weixin-menu-detail .menu-name{
        float: left;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
    }
    .weixin-menu-detail .menu-del{
        float: right;
        height: 40px;
        line-height: 40px;
        color: #459ae9;
        cursor:pointer;
    }
    .weixin-menu-detail .menu-input-group{
        width:540px;
        margin:10px 0 30px 0;
        overflow: hidden;
    }
    .weixin-menu-detail .menu-label{
        float: left;
        height: 30px;
        line-height: 30px;
        width:80px;
        text-align: right;
    }
    .weixin-menu-detail .menu-input{
        float:left;
        width: 380px
    }
    .weixin-menu-detail .menu-input-text{
        border: 0px;
        outline: 0px;
        background: #fff;
        width: 300px;
        padding: 5px 0px 5px 0px;
        margin-left: 10px;
        text-indent: 10px;
        height: 35px;
    }
    .weixin-menu-detail .menu-tips{
        color: #8d8d8d;
        padding-top: 4px;
        margin:0;
    }
    .weixin-menu-detail .menu-tips.cursor{
        color: #459ae9;
        cursor: pointer;
    }

    .weixin-menu-detail .menu-input .menu-tips{
        margin:0 0 0 10px;
    }
    .weixin-menu-detail .menu-content{
        padding: 16px 20px;
        border: 1px solid #e7e7eb;
        background-color: #fff;
    }
    .weixin-menu-detail .menu-content .menu-input-group{
        margin: 0px 0 10px 0;
    }
    .weixin-menu-detail .menu-content .menu-label{
        text-align: left;
        width:100px;
    }
    .weixin-menu-detail .menu-content .menu-input-text{
        border: 1px solid #e7e7eb;
    }
    .weixin-menu-detail .menu-content .menu-tips{
        padding-bottom: 10px;
    }

    .weixin-menu-detail .menu-msg-content{
        padding: 0;
        border: 1px solid #e7e7eb;
        background-color: #fff;
    }
    .weixin-menu-detail .menu-msg-content .menu-msg-head{
        overflow: hidden;
        border-bottom: 1px solid #e7e7eb;
        line-height: 38px;
        height: 38px;
        padding: 0 20px;
    }
    .weixin-menu-detail .menu-msg-content .menu-msg-panel{
        padding: 30px 50px;
    }
    .weixin-menu-detail .menu-msg-content .menu-msg-select{
        padding: 40px 20px;
        border: 2px dotted #d9dadc;
        text-align: center;
    }
    .weixin-menu-detail .menu-msg-content .menu-msg-select:hover{
        border-color: #b3b3b3;
    }
    .weixin-menu-detail .menu-msg-content strong{
        display: block;
        padding-top: 3px;
        font-weight: 400;
        font-style: normal;
    }
    .weixin-menu-detail .menu-msg-content .menu-msg-title{
        float: left;
        width: 310px;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .icon36_common{
        width: 36px;
        height: 36px;
        vertical-align: middle;
        display: inline-block;
    }
    .icon36_common.add_gray{
        background: url(../../assets/wechat/base_z381ecd.png) 0 -2548px no-repeat;
    }
    .icon_msg_sender{
        margin-right: 3px;
        margin-top: -2px;
        width: 20px;
        height: 20px;
        vertical-align: middle;
        display: inline-block;
       background: url(../../assets/wechat/msg_tab_z25df2d.png) 0 -270px no-repeat;
    }

    .weixin-btn-group{
        text-align: center;
        width:950px;
        margin:30px 0px;
        overflow: hidden;
    }
    .weixin-btn-group .btn{
        width: 100px;
        border-radius: 0px;
    }

    #material-list{
        padding:20px;
        overflow-y:scroll;
        height: 558px;
    }
    #news-list{
        padding:20px;
        overflow-y:scroll;
        height: 558px;
    }
    #material-list table{
        width:100%;
    }


</style>
